<script>
import {getLogin, getUserInfo} from '@/api/modules/login'

export default {
  name: "login",
  data() {
    return {
      params: {
        mobile: "",
        password: "",
        identity: 2
      },
      pattern: /1\d{10}/,
      checkbox: false
    }
  },
  methods: {
    async onSubmit() {
      this.$utils.showLoading('加载中')
      const login = await getLogin(this.params)
      if (login.code === 0 && login.data.token) {
        this.$store.commit('setUserInfo', login.data)
        const userInfo = await getUserInfo()
        if (userInfo.code === 0) {
          this.$store.commit('userMutations', {
            ...userInfo.data,
            token: login.data.token
          })
        }
        this.$router.replace('/home')
      }
      this.$utils.hideLoading()

    }
  }
};
</script>

<template>
  <div class="login">
    <customNav></customNav>
    <div class="pd-16 pb-16">
      <div class="login-title flex-center">
        <span class="txt1">安全家园</span>
        <span class="txt2 size-12 ">云学苑</span>
      </div>

      <div class="login-tips flex-center">邀您登录</div>
      <div style="height: 24px"></div>
      <van-form @submit="onSubmit">
        <van-field
            v-model="params.mobile"
            name="mobile"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请输入手机号' },{ pattern, message: '请输入正确的手机号' }]"
        />
        <div style="height: 24px"></div>
        <van-field
            v-model="params.password"
            type="password"
            name="password"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="height: 24px"></div>
        <div class="flex-between">
          <div class="flex-center">
            <van-checkbox icon-size="16px" checked-color="#0a1450" v-model="checkbox" shape="square"/>
            <span @click="checkbox =!checkbox" style="margin-left: 6px">记住我</span>
          </div>
          <span @click="routerPush('')" class="textColor size-12">忘记密码了？点击找回</span>
        </div>
        <div style="height: 24px"></div>
        <div>
          <van-button color="#0a1450" block type="info" native-type="submit">提交</van-button>
        </div>
        <div style="height: 24px"></div>
        <div>
          <van-button @click="routerPush('/register')" block type="primary" native-type="submit">注册</van-button>
        </div>
      </van-form>

    </div>
  </div>
</template>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: white;

  ::v-deep .van-field {
    background-color: #f2f3f5;
    padding: 16px 10px;
    border-radius: 6px;
    box-sizing: border-box;
  }


  .login-title {
    .txt1 {
      font-size: 41px;
      font-weight: bold;
      color: var(--theme-txt-color);
    }

    .txt2 {
      writing-mode: vertical-rl;
      color: white;
      font-weight: bold;
      background-color: var(--theme-txt-color);
      border-radius: 2px;
      margin-left: 5px;
      padding: 2px 0;
    }


  }

  .login-tips {
    color: var(--theme-color);
    margin: 12px 0;
    font-size: 28px;

  }
}
</style>
